<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap排版</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>我是标题H1. <small>我是副标题1</small></h1>
<h2>我是标题H2. <small>我是副标题2</small></h2>
<h3>我是标题H3. <small>我是副标题3</small></h3>
<h4>我是标题H4. <small>我是副标题4</small></h4>
<h5>我是标题H5. <small>我是副标题5</small></h5>
<h6>我是标题H6. <small>我是副标题6</small></h6>

<h2>引导主题副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
<small>本行内容是用在标签内的</small>
<strong>本行内容是在标签内的</strong>
<em>本行内容在标签内,并呈现为斜体</em>
<p class="text-left">向左对其的文本</p>
<p class="text-center">居中对其的文本</p>
<p class="text-right">向右对齐的文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容包含一个primary class</p>
<p class="text-success">本行内容包含一个success class</p>
<p class="text-info">本行内容包含一个info class</p>
<p class="text-danger">本行内容包含一个danger class</p>
<p class="text-warning">本行内容包含一个warning class</p>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

<address>
    <strong>Some Company,Inc</strong><br>
    007 street<br>
    Some City,State xxxxx<br>
    <abbr title="Phone">P</abbr>(123)345-98900
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">mailto@somedomain.com</a>
</address>

<blockquote>
    <p>这是一个默认的引用实例</p>
</blockquote>
<blockquote>这是一个带有原标题的引用。
    <small>Someone famous in <cite title="Sourece Title">Source Title</cite></small><br>
    <small>这是第二个引用</small>
</blockquote>
<blockquote class="pull-right">
    这是一个向右对齐的引用。
    <small>Someone famous in <cite title="ourece Title">Source Title</cite></small>
</blockquote>

<h4>有序列表</h4>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

<h4>无序列表</h4>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<h4>未定义样式列表</h4>
<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<h4>内置样式列表</h4>
<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<h4>定义列表</h4>
<dl>
    <dt>Description 1</dt>
    <dd>Item 1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd>
    <dt>Description 3</dt>
    <dd>Item 3</dd>
    <dt>Description 4</dt>
    <dd>Item 4</dd>
</dl>

<h4>水平定义列表</h4>
<dl class="dl-horizontal">
    <dt>Description 1</dt>
    <dd>Item 1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd>
    <dt>Description 3</dt>
    <dd>Item 3</dd>
    <dt>Description 4</dt>
    <dd>Item 4</dd>
</dl>

<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行 对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行 对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。 该段落不会根据屏幕的大小对超出屏幕的文字进行换行。 该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
<p class="text-lowercase">这一行都是小写DSFHOSFOJEOI</p>
<p class="text-uppercase">这一行都是大写lshfofjiosefjsef</p>
<p class="text-capitalize">this 这一行首字母大写</p>
<abbr title="世界卫生组织：World Health Organization" class="initialism">WHO 以较小的字体显示</abbr><br>
<pre class="pre-scrollable">
        内容可滚动
		Text in a pre element
		is displayed in a fixed-width
		font, and it preserves
		both      spaces and
		line breaks.
		Text in a pre element
		is displayed in a fixed-width
		font, and it preserves
		both      spaces and
		line breaks.
</pre>


<p><code>&lt;header&gt;</code>作为内联元素被包围</p>
<pre>
    <p>如果需要把代码显示为一个独立的块元素,请使用&lt;h1&gt;pre&lt;/h1&gt;标签</p>
    &lt;article&gt;
    &lt;h1&gt;Article header&lt;/h1&gt;
&lt;/article&gt;
</pre>



<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>